import React from "react"
import { NavBar, Icon, Tabs, WhiteSpace  } from 'antd-mobile';
const tabs = [
    { title: '最热' },
    { title: '最新' },
    { title: '榜单' },
    { title: '搜索' },
    { title: '我的' },
  ];
  
class CaiLing extends React.Component{
    Huitui(){
        this.props.history.go(-1)
    }
    render(){
        return(
            <div>
                <NavBar
                    mode="light"
                    icon={<Icon type="left" onClick={this.Huitui.bind(this)} /> }
                    onLeftClick={() => console.log('onLeftClick')}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                    >彩铃专区</NavBar>
                <Tabs tabs={tabs} initialPage={2} animated={false} useOnPan={false}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                        Content of first tab
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                        Content of second tab
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                        Content of third tab
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                        Content of third tab
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                        Content of third tab
                    </div>
                </Tabs>
            </div>
        )
    }
}

export default CaiLing